<template>
    <div>
        <page-header title="添加学生信息" content="Add student information" />
        <page-main>
            <h1>
                <el-page-header @back="goBack" />
            </h1>
            <el-row type="flex" justify="center" :gutter="50">
                <el-col :xs="24" :sm="18" :md="16" :lg="12" :xl="12">
                    <el-card>
                        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px"
                                 label-position="center"
                        >
                            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="12">
                                <el-form-item label="院系:" prop="department_id">
                                    <el-select v-model="formData.department_id" placeholder="请选择院系" clearable :style="{width: '100%'}" @change="findAll_Major">
                                        <el-option v-for="(item, index) in field102Options" :key="index" :label="item.department_name"
                                                   :value="item.id" :disabled="item.disabled"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="12">
                                <el-form-item label="专业:" prop="major">
                                    <el-select v-model="formData.major" value-key="id" placeholder="请选择专业" clearable :style="{width: '100%'}" @change="change_class">
                                        <el-option v-for="(item, index) in field101Options" :key="index" :label="item.major_name"
                                                   :value="item" :disabled="item.disabled"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="12">
                                <el-form-item label="年级:" prop="grade"
                                >
                                    <el-input v-model.number="formData.grade" maxlength="2" placeholder="（仅填写代表入学年份后两位）" @input="change_class">
                                        <template slot="append">级</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="12">
                                <el-form-item label="班级:" prop="class">
                                    <el-input v-model.number="formData.class" maxlength="2" placeholder="（仅填写代表班级的整数）" @input="change_class">
                                        <template slot="append">班</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <h2>选择的班级：</h2>
                                <el-card style="margin: 5px;">
                                    班级：
                                    <b style="color: #409eff;">{{ class_information }}</b>
                                </el-card>
                            </el-col>
                            <el-col :span="24">
                                <h2>学生的姓名：</h2>
                                <b style="color: #409eff;">
                                    1.可以批量新增学生的信息，但是要求每个人的名字用<b style="color: #ff342c;">逗号“，”</b>进行分隔!
                                </b>
                                <br>
                                <el-card style="margin: 5px;">
                                    <el-input
                                        v-model.trim="formData.students_name"
                                        type="textarea"
                                        :rows="6"
                                        placeholder="请输入学生姓名，每个名字用逗号“，”分隔"
                                    />
                                </el-card>
                            </el-col>
                        </el-form>
                        <el-col :round="true" :push="9" style="margin: 10px;">
                            <el-button type="primary" @click="submitForm">
                                添加
                            </el-button>
                        </el-col>
                    </el-card>
                </el-col>
            </el-row>
        </page-main>
    </div>
</template>

<script>
import api from '../../api'
import {Message} from 'element-ui'

export default {
    name: 'add.class',
    data() {
        return {
            formData: {
                department_id: 124,
                major: [],
                grade: null,
                class: null,
                students_name: null
            },
            rules: {
                department_id: [{
                    required: true,
                    message: '请选择院系',
                    trigger: 'change'
                }],
                major: [{
                    required: true,
                    message: '请选择专业',
                    trigger: 'change'
                }],
                grade: [{
                    required: true,
                    message: '请输入年级',
                    trigger: 'change'
                }, {
                    type: 'number',
                    message: '年级必须为数字值'
                }],
                class: [{
                    required: true,
                    message: '请输入班级',
                    trigger: 'change'
                }, {
                    type: 'number',
                    message: '班级必须为数字值'
                }]
            },
            field101Options: [],
            field102Options: [],
            field103Options: [
                {
                    id: '大一（上学期）',
                    name: '大一（上学期）'
                },
                {
                    id: '大一（下学期）',
                    name: '大一（下学期）'
                },
                {
                    id: '大二（上学期）',
                    name: '大二（上学期）'
                },
                {
                    id: '大二（下学期）',
                    name: '大二（下学期）'
                },
                {
                    id: '大三（上学期）',
                    name: '大三（上学期）'
                },
                {
                    id: '大三（下学期）',
                    name: '大三（下学期）'
                },
                {
                    id: '大四（上学期）',
                    name: '大四（上学期）'
                },
                {
                    id: '大四（下学期）',
                    name: '大四（下学期）'
                }],
            value: [],
            addData: [{
                MajorID: [],
                course: [],
                start_time: ''
            }],
            class_information: null
        }
    },
    created() {
        if (this.$store.state.settings.mode == 'mobile') {
            this.show = false
        } else {
            this.show = true
        }
        var _this = this
        api.post('department/findAll').then(res => {
            _this.field102Options = res.data
        })
        api.post('major/findByDepartmentID', {
            data: this.formData.department_id})
            .then(res => {
                this.field101Options = res.data
                this.formData.major = res.data[0]
            })

    },
    methods: {
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                // TODO 提交表单
                this.$confirm('是否确认发布消息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(() => {
                    if (this.formData.students_name == null) {
                        Message.error('学生姓名不能为空')
                        return
                    }
                    // 提交消息给后端
                    api.post('student/addStudent', {
                        data: this.formData, account: this.$store.state.user.account})
                        .then(res => {
                            Message.success(res.msg)
                            // 跳转路径
                            this.$router.push({path: '/school/basic/student_information'})
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消发布'
                    })
                })

            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
        goBack() {
            this.$router.push({path: '/school/basic/student_information'})
        },
        findAll_Major() {
            var _this = this
            api.post('major/findByDepartmentID', {
                data: this.formData.department_id})
                .then(res => {
                    _this.field101Options = res.data
                    _this.formData.major = res.data[0]
                })

        },
        change_class() {
            if (this.formData.grade != null & this.formData.class != null) {
                this.class_information = this.formData.grade
                    + '级 '
                    + this.formData.major.major_name
                    + ' '
                    + this.formData.class + '班'
            }
            if (this.formData.grade == '' || this.formData.class == '') {
                this.class_information = null
            }
        }
    }
}
</script>
